import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Draggable from 'react-draggable'
import 'css/index/common/dragDrop.scss'

class RxDragDrop extends Component {
  constructor(props) {
    super(props)
  }
  destroy = (e) => {
    e.preventDefault()
    this.props.destroy()
  }
  render() {
    return (
      <Draggable
        handle='.dragDrop-title'
        defaultPosition={this.props.position}
        bounds='body'
        offsetParent={document.body}
      >
        <div className="dragDrop">
          <h3 className='dragDrop-title'>{this.props.title}</h3>
          <a href="#" id="dragDrop-closer" className="dragDrop-closer" onClick={this.destroy}></a>
          <div className="dragDrop-content">
            {this.props.children}
          </div>
        </div>
      </Draggable>
    )
  }
}
RxDragDrop.propTypes = {
  title: PropTypes.string,
  children: PropTypes.node,
  destroy: PropTypes.func,
  index: PropTypes.number,
  name: PropTypes.string,
  position: PropTypes.object,
}
export default RxDragDrop